f
<!--
 * @Author: Liz.Zheng
 * @Date: 2021-11-15 16:16:07
 * @LastEditTime: 2023-02-15 11:10:55
 * @LastEditors: 郑亚莉 zhengyali@shequ.life
 * @Description: 集合列表
 * @Motto: Write the code. Change the world.
-->
<template>
  <div class="building-list">
    <a-table
      :dataSource="dataList"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      rowKey="id"
      :scroll="{ x: 'max-content' }"
    >
      <template #title>
        <a-row type="flex" class="table-header">
          <a-col flex="auto">
            <!-- 搜索 -->
          </a-col>
          <a-col flex="200px" class="text-right">
            <a-button type="primary" @click="bucketEdit()">
              <template #icon>
                <PlusOutlined />
              </template>
              添加集合
            </a-button>
          </a-col>
        </a-row>
      </template>
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'collection_build'">
          <span> {{ getBuildName(text) }}</span>
        </template>
        <template v-if="column.key === 'action'">
          <a-button type="link" @click="bucketEdit(text)">编辑</a-button>
          <a-button type="link" danger @click="bucketDel(record)"
            >删除</a-button
          >
        </template>
      </template>
    </a-table>
    <bucket-add
      :visible="bucketEditVisible"
      :id="currentBucketId"
      @cancel="handleBucketClose"
      @success="handleBucketSuccess"
    ></bucket-add>
  </div>
</template>

<script>
import { defineComponent, ref, computed, watch } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import request from "../../../common/utils/request";
import BucketAdd from "./modules/BucketAdd.vue";
import utils from "../../../common/utils/utils";
import { message } from "ant-design-vue";
import store from "../../../store";
import BLCOMMON from "bl-common-vue3";

export default defineComponent({
  name: "CollectBuildList",
  components: { PlusOutlined, BucketAdd },
  setup() {
    // 分页
    const page = ref(1);
    const limit = ref(10);
    const total = ref(0);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: limit.value,
      showSizeChanger: true,
    }));
    const loading = ref(false);
    const handleTableChange = (pager, filters, sorter) => {
      page.value = pager.current;
      limit.value = pager.pageSize;
      getDataList();
    };

    // 请求楼宇列表
    const statisticData = ref({});
    const dataList = ref([]);
    const getDataList = () => {
      request
        .get("/org", "/build/collectionPage", {
          page: page.value,
          pageSize: limit.value,
        })
        .then((res) => {
          dataList.value = res.list;
          total.value = res.total;
        });
    };

    const bucketEditVisible = ref(false);
    const currentBucketId = ref(0);
    const bucketEdit = (id) => {
      currentBucketId.value = id ? id : 0;
      bucketEditVisible.value = true;
    };
    const handleBucketClose = () => {
      bucketEditVisible.value = false;
    };
    const handleBucketSuccess = () => {
      handleBucketClose();
      getDataList();
    };

    const bucketDel = (record) => {
      utils.modalConfirm({
        content: `确认删除集合"${record.collection_name}"？`,
        centered: true,
        onOk: () => {
          request
            .del("/org", "/build/collection", {
              id: record.id,
              needMsg: true,
            })
            .then((res) => {
              getDataList();
              message.success(res.msg || "删除成功");
            });
        },
      });
    };

    const getBuildName = (list) => {
      const nameArr = list.map((item) => item.build_name);
      return nameArr.join("、");
    };

    const init = () => {
      getDataList();
    };
    init();

    const columns = [
      { title: "集合名称", dataIndex: "collection_name", width: 200 },
      {
        title: BLCOMMON.utils.L("楼宇集合"),
        dataIndex: "collection_build",
        key: "collection_build",
        width: 500,
      },
      {
        title: "操作",
        dataIndex: "id",
        key: "action",
        fixed: store.getters.isMobile ? "right" : undefined,
        width: store.getters.isMobile ? 130 : 200,
      },
    ];
    return {
      loading,
      columns,
      dataList,
      pagination,
      bucketEditVisible,
      currentBucketId,
      handleTableChange,
      bucketEdit,
      handleBucketClose,
      handleBucketSuccess,
      getBuildName,
      bucketDel,
    };
  },
});
</script>

<style lang="less" scoped>
.building-list {
  padding: 10px;
  .table-header {
    padding: 0 10px;
    font-weight: bold;
  }
}
</style>
